<
コンテンツ
説明 バグレポート

スワイプで閉じる機能を実装する

コンテンツ

「スワイプして閉じる」パターンは、多くのモバイル アプリで一般的です。 たとえば、メール アプリを作成する場合、 ユーザーがスワイプして離れられるようにしたい場合があります 電子メール メッセージをリストから削除します。

Flutter が提供することでこのタスクが簡単になります。Dismissibleウィジェット。 次の手順でスワイプして閉じる方法を実装する方法を学習します。

  1. 項目のリストを作成します。
  2. それぞれのアイテムを包みますDismissibleウィジェット。
  3. 「置き去り」インジケーターを提供します。

1. アイテムのリストを作成する

まず、項目のリストを作成します。詳細については リストの作成方法に関する説明、 に従ってください長いリストの操作レシピ。

データソースを作成する

この例では、 20 個のサンプル項目を使用したいとします。 単純にするために、文字列のリストを生成します。

final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

データソースをリストに変換する

各項目を画面上にリスト表示します。ユーザーはそうしません これらのアイテムはまだスワイプして削除できます。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

2.各アイテムを閉じることができるウィジェットで囲みます

このステップでは、 ユーザーが、Dismissibleウィジェット。

ユーザーがアイテムをスワイプした後、 リストから項目を削除し、スナックバーを表示します。 実際のアプリでは、より複雑なロジックを実行する必要がある場合があります。 Web サービスやデータベースからアイテムを削除するなど。

を更新しますitemBuilder()を返す関数Dismissibleウィジェット:

itemBuilder: (context, index) {
  final item = items[index];
  return Dismissible(
    // Each Dismissible must contain a Key. Keys allow Flutter to
    // uniquely identify widgets.
    key: Key(item),
    // Provide a function that tells the app
    // what to do after an item has been swiped away.
    onDismissed: (direction) {
      // Remove the item from the data source.
      setState(() {
        items.removeAt(index);
      });

      // Then show a snackbar.
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('$item dismissed')));
    },
    child: ListTile(
      title: Text(item),
    ),
  );
},

3. 「置き去り」インジケーターを提供する

現状では、 このアプリでは、ユーザーがリストから項目をスワイプして削除することはできますが、そうではありません 実行すると何が起こるかを視覚的に示します。 アイテムが削除される合図を提供するには、 彼らがいるときに「置き去り」インジケーターを表示します 項目を画面からスワイプします。この場合、 インジケーターの背景は赤です。

インジケーターを追加するには、 を提供するbackgroundパラメータへのDismissible。

lib/{step2.dart (拒否可能) → main.dart (拒否可能)}
@@ -16,6 +16,8 @@
16
16
  ScaffoldMessenger.of(コンテキスト)
17
17
  .showSnackBar(SnackBar(content: Text('$item canceled')));
18
18
  }、
19
+ // 項目がスワイプされると、赤い背景が表示されます。
20
+ 背景: コンテナ(色: Colors.red)、
19
21
  子: ListTile(
20
22
  タイトル: テキスト(項目)、
21
23
  ）、

インタラクティブな例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// MyApp is a StatefulWidget. This allows updating the state of the
// widget when an item is removed.
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    const title = 'Dismissing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              // Each Dismissible must contain a Key. Keys allow Flutter to
              // uniquely identify widgets.
              key: Key(item),
              // Provide a function that tells the app
              // what to do after an item has been swiped away.
              onDismissed: (direction) {
                // Remove the item from the data source.
                setState(() {
                  items.removeAt(index);
                });

                // Then show a snackbar.
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('$item dismissed')));
              },
              // Show a red background as the item is swiped away.
              background: Container(color: Colors.red),
              child: ListTile(
                title: Text(item),
              ),
            );
          },
        ),
      ),
    );
  }
}